@import "common/_functions.scss";

.rank {
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpeg) no-repeat 0 0;
    background-size: 100% 100%;
    color: #FFFFFF;
    overflow: auto;
    h3 {
        box-sizing: border-box;
        padding: rem(40) rem(40) rem(20);
        font-size: rem(44);
        font-weight: 500;
    }
    .classify {
        box-sizing: border-box;
        padding: 0 rem(40);
        font-size: 0;
        li {
            display: inline-block;
            height: rem(60);
            padding: 0 rem(14) 0 rem(40); 
            margin-right: rem(15);
            margin-bottom: rem(15);
            background: rgba(0, 0, 0, 0.69);
            border-radius: 6px;
            line-height: rem(62);
            overflow: hidden;
            div {
                float: left;
                font-size: rem(28);
            }
            i {
                display: block;
                float: left;
                margin-top: rem(4);
            }
        }
    }
    .title, .list li {
        display: flex;
        box-sizing: border-box;
        height: rem(114);
        padding: 0 rem(40);
        border-bottom: 1px solid rgba(153,153,153,0.80);
        justify-content: space-between;
        align-items: center;
    }
    .title {
        font-size: rem(26);
    }
    .scroll-container {
        height: rem(800);
        overflow: hidden;
    }
    .list-wrap {
        height: 100%;
    }
    .list {
        font-size: rem(30);
    }
    .active {
        color: #FE8247
    }
    .switch {
        position: relative;
        i {
            position: absolute;
            right: 0;
            font-size: rem(26);
        }
        .mui-icon-arrowup {
            top: rem(8);
        }
        .mui-icon-arrowdown {
            bottom: rem(8);
        }
    }
    .btn-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        width: 100%;
        height: rem(100);
        background: rgba(255, 255, 255, 0.20);
        box-shadow: 0 rem(20) rem(60) 0 rgba(0, 0, 0, 0.20);
        justify-content: space-between;
        a {
            position: relative;
            display: block;
            width: 50%;
            height: 100%;
            line-height: rem(100);
            text-align: center;
            font-size: rem(32);
            color: #FFF;
        }
        a:nth-child(1):after {
            position: absolute;
            right: 0;
            top: 50%;
            width: 1px;
            height: rem(44);
            margin-top: rem(-22);
            background: rgba(255,255,255,0.48);
            content: ''
        }
    }
}
.exam-rank {
    .switch, .list span {
        width: rem(130);
        text-align: center;
    }
}
.exam-count {
    .switch, .list span {
        width: rem(234);
        text-align: center;
    }
    .title div:nth-child(3), .list span:nth-child(3) {
        width: rem(160)
    } 
}
.area-rank {
    .switch, .list span {
        width: rem(180);
        text-align: center;
    }
}